<template>
  <div style="width: 100%; height: 100%">
    <div class="titleBox">
      <p>能耗资产信息</p>
      <i class="separate"></i>
    </div>
    <ul class="itemList">
      <li>
        <i>
          <div
            id="energyStatisticsOnePicture"
            class="energyStatisticsOnePicture"
          ></div>
        </i>
        <p>一次配电设备</p>
      </li>
      <li>
        <i>
          <div
            id="energyStatisticsTowPicture"
            class="energyStatisticsTowPicture"
          ></div>
        </i>
        <p>一次配电设备</p>
      </li>
      <li>
        <i>
          <div
            id="energyStatisticsThreePicture"
            class="energyStatisticsThreePicture"
          ></div>
        </i>
        <p>一次配电设备</p>
      </li>
    </ul>
    <div class="titleBox">
      <p>能耗汇总</p>
      <i class="separate"></i>
    </div>
    <ul class="energySumList">
      <li v-for="energySumData in energySumDataList" :key="energySumData">
        <i></i>
        <ul>
          <li>
            <h2>{{ energySumData.name }}</h2>
          </li>
          <li>
            <p>{{ energySumData.Day }}</p>
            <b>本日总能耗 {{ energySumData.unit }}</b>
          </li>
          <li>
            <p>{{ energySumData.Month }}</p>
            <b>本月总能耗 {{ energySumData.unit }}</b>
          </li>
        </ul>
      </li>
    </ul>
    <div class="titleBox">
      <p>实时报警</p>
      <i class="separate"></i>
    </div>
    <div id="alarmPicture" class="alarmPicture"></div>
  </div>
</template>

<script>
import {
  energyStatisticsEcharts,
  alarmEcharts,
  monthEnergyEcharts,
} from "../assets/js/echarts.js";
import {
  energyStatisticsEchartsData,
  energyStatistics2EchartsData,
  energyStatistics3EchartsData,
  energySumData,
  alarmEchartsData,
  enterpriseData,
  energyConsumptionData,
} from "../assets/js/data.js";
export default {
  data() {
    return {
      energySumDataList: energySumData,
      enterpriseDataList: enterpriseData,
    };
  },
  computed: {
    energyStatisticsOnePictureInit() {
      return this.$echarts.init(
        document.getElementById("energyStatisticsOnePicture")
      );
    },
    energyStatisticsTowPictureInit() {
      return this.$echarts.init(
        document.getElementById("energyStatisticsTowPicture")
      );
    },
    energyStatisticsThreePictureInit() {
      return this.$echarts.init(
        document.getElementById("energyStatisticsThreePicture")
      );
    },
    alarmPictureInit() {
      return this.$echarts.init(document.getElementById("alarmPicture"));
    },
    monthEnergyInit() {
      return this.$echarts.init(document.getElementById("MonthEnergyPicture"));
    },
  },
  methods: {
    energyStatisticsOne() {
      let option = energyStatisticsEcharts(energyStatisticsEchartsData);
      if (option) {
        this.energyStatisticsOnePictureInit.setOption(option);
      }
    },
    energyStatisticsTow() {
      let option = energyStatisticsEcharts(energyStatistics2EchartsData);
      if (option) {
        this.energyStatisticsTowPictureInit.setOption(option);
      }
    },
    energyStatisticsThree() {
      let option = energyStatisticsEcharts(energyStatistics3EchartsData);
      if (option) {
        this.energyStatisticsThreePictureInit.setOption(option);
      }
    },
    alarm() {
      let option = alarmEcharts(alarmEchartsData);
      if (option) {
        this.alarmPictureInit.setOption(option);
      }
    },
    monthEnergy() {
      let option = monthEnergyEcharts(energyConsumptionData);
      if (option) {
        this.monthEnergyInit.setOption(option);
      }
    },
  },
  mounted() {
    this.energyStatisticsOne();
    this.energyStatisticsTow();
    this.energyStatisticsThree();
    this.alarm();
    this.monthEnergy();
  },
};
</script>

<style lang="less" scoped>
@import "../../../assets/css/chuShiHua.less";
@import "../../../assets/css/data.css";
@import "../assets/css/energyStatistics.less";
</style>
